<template>
    <div class="content-wrapper-view log">
		<div class="content-wrapper-body"><!-- 开始 -->
			<!-- 工具栏- -->
	        <div class="filter-wrapper">
	            <el-form ref="filterForm" :model="listQuery" :inline="true">
                    <el-form-item prop="userName" size="medium">
                        <el-input v-model="listQuery.userName" placeholder="用户名"></el-input>
                    </el-form-item>
	                <el-form-item prop="logType" size="medium">
	                    <el-select v-model="listQuery.logType" placeholder="日志类型" clearable style="width: 130px">
	                        <el-option
	                                v-for="item in typeOptions"
	                                :key="item.value"
	                                :label="item.label"
	                                :value="item.value">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	
	                <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
	                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
	                <el-button v-if="authorize('system:log:delete')" type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
	            </el-form>
	        </div>
	
			<!-- 表格 -->
	        <el-table
	                :data="list"
	                border fit
	                highlight-current-row
	                v-loading="listLoading"
	                element-loading-text="给我一点时间"
	                empty-text="-"
	                @selection-change="handleSelectionChange">
	
	            <el-table-column type="selection" width="55" align="center"></el-table-column>
	            <el-table-column type="index" width="55" align="center"></el-table-column>
	
				<el-table-column label="用户名" width="100px" align="center">
	                <template slot-scope="scope"> {{ scope.row.userName }} </template>
	            </el-table-column>
				<el-table-column label="类型" width="100px" align="center">
	                <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.logType === '登出日志'">{{ scope.row.logType }}</el-tag>
                        <el-tag type="success" v-if="scope.row.logType === '登录日志'">{{ scope.row.logType }}</el-tag>
                        <el-tag type="primary" v-if="scope.row.logType === '业务日志'">{{ scope.row.logType }}</el-tag>
                        <el-tag type="danger" v-if="scope.row.logType === '异常日志'">{{ scope.row.logType }}</el-tag>
                        <el-tag type="warning" v-if="scope.row.logType === '未知'">{{ scope.row.logType }}</el-tag>
                    </template>
	            </el-table-column>
				<el-table-column label="操作描述" width="200px" align="center" :show-overflow-tooltip="true">
	                <template slot-scope="scope"> {{ scope.row.logDesc }} </template>
	            </el-table-column>
				<el-table-column label="请求路径" width="160px" align="center" :show-overflow-tooltip="true">
	                <template slot-scope="scope"> {{ scope.row.requestUri }} </template>
	            </el-table-column>
				<el-table-column label="请求方法" align="center">
	                <template slot-scope="scope"> {{ scope.row.requestMethod }} </template>
	            </el-table-column>
				<el-table-column label="请求参数" width="300px" align="center" :show-overflow-tooltip="true">
	                <template slot-scope="scope"> {{ scope.row.requestParams }} </template>
	            </el-table-column>
				<el-table-column label="IP" width="100px" align="center">
	                <template slot-scope="scope"> {{ scope.row.ip }} </template>
	            </el-table-column>
				<el-table-column label="IP位置" width="100px" align="center">
	                <template slot-scope="scope"> {{ scope.row.ipLocation }} </template>
	            </el-table-column>
				<el-table-column label="耗时(ms)" align="center">
	                <template slot-scope="scope"> {{ scope.row.spendTime }} </template>
	            </el-table-column>
				<el-table-column label="创建时间" width="160px" align="center">
	                <template slot-scope="scope"> {{ scope.row.ctime | getRelativeTime(scope.row.ctime) }} </template>
	            </el-table-column>
	            <el-table-column label="操作" width="100px" align="center">
	                <template slot-scope="scope">
	                    <el-button v-if="authorize('system:log:delete')" size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
	                </template>
	            </el-table-column>
	        </el-table>
	
			<!-- 分页工具栏 -->
	        <div v-if="!listLoading" class="pagination-container">
	            <el-pagination
                        background
	                    @size-change="handleSizeChange"
	                    @current-change="handleCurrentChange"
	                    :current-page="listQuery.page"
	                    :page-sizes="[10, 20, 30, 50]"
	                    :page-size="listQuery.limit"
	                    layout="total, sizes, prev, pager, next, jumper"
	                    :total="total">
	            </el-pagination>
	        </div>
	
		</div>    	
		<back-to-top></back-to-top>
    </div>
</template>

<script>
    import { created, updated, deleted, selectOne, selectList, selectPage } from '@/api/system/log'
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import BackToTop from "@/components/BackToTop/index";
    import valid from '@/libs/rules'

    const typeOptions = [
        {label: '登录日志', value: '登录日志'}, 
        {label: '登出日志', value: '登出日志'}, 
        {label: '业务日志', value: '业务日志'}, 
        {label: '异常日志', value: '异常日志'},
        {label: '未知', value: '未知'}
    ]

    export default {
        name: 'Log',
        components: {BackToTop},
        data() {
            let required = valid.required()
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                    userName: null,
                    logType: null,
                    orderBy: 'ctime desc'
                },
                multipleSelection: [],
                typeOptions
            }
        },
        created() {
            this.getPage()
        },
        methods: {
        	authorize(auth) {
				return isAuth(auth) //按钮权限验证
            },
            handleFilter() {//条件过滤
                this.listQuery.page = 1
                this.getPage()
            },
            handleResetFilter() {//重置过滤条件
                this.cancel('filterForm')
                this.getPage()
            },
            handleDialogClose() {//关闭窗口回调函数
                this.cancel('form')
            },
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.page = 1
                this.listQuery.limit = val
                this.getPage()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getPage()
            },
            handleDelete(row) {//批量删除数据
                let ids = []
                if (row.id != undefined) {
                    ids.push(row.id)
                } else {
                    if (this.multipleSelection.length > 0) {
                        for (let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                    }
                }
                if (ids.length <= 0) {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                } else {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                       deleted({idList: ids}).then(response => {
                            if(ResultMessage(response)) {
                                this.getPage()
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '删除失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }).catch(() => {})
                }
            },
            getData(id) { //根据ID查询数据
                this.listLoading = true
                return selectOne(id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.listLoading = false
                        return response
                    } else {
                        this.listLoading = false
                        return null
                    }
                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.listLoading = false
                })
            },
            getPage() {//查询分页列表
                this.listLoading = true
                selectPage(this.listQuery).then(response => {
                    if(ResultMessage(response, false)) {
                        this.list = response.data.data.list
                        this.total = parseInt(response.data.data.total)
                        this.listLoading = false
                    } else {
                        this.listLoading = false
                    }
                }).catch(error => {
                    this.listLoading = false
                    this.$notify({
                        title: '提示', message: '查询列表失败',
                        type: 'error', duration: 2000
                    })
                })
            },
            cancel(formName) {
                const set = this.$refs
                set[formName].resetFields()
                this.form = {
                    sex: 1,
                    status: true
                }
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>